<template>
  <div class="content">
    <div class="top">
      <div class="back cubeic-back">
        <router-link to='/ucenter'>返回</router-link>
      </div>
    </div>
    <div class="title">
      请选择类型：
    </div>
    <div class="set">
      <!-- <cube-checker
      v-model="myType"
      :options="options"
      :max="checkedNum" /> -->
      <div class="set-list" v-for="(obj,index) in options" :key="index" :class="{red:obj.my==1}" @click="select(index)">
        {{obj.text}}
      </div>
    </div>
    <div class="buttons">
      <cube-button :primary="true" @click="setType()">确认</cube-button>
    </div>
  </div>
</template>
<script>
// import store from '@/store'
import { postData } from '../js/axios'
export default {
  data () {
    return {
      checkedNum: 50,
      email: '',
      userinfo: '',
      myType: [],
      options: []
    }
  },
  methods: {
    setType: function () {
      this.myType = []
      for (let i = 0; i < this.options.length; i++) {
        if (this.options[i].my === 1) {
          this.myType.push(this.options[i].value)
        }
      }
      console.log(this.myType)
      let Obj = {}
      Obj.typelist = this.myType
      Obj.userid = this.userinfo.id
      Obj.userid = 1
      postData('http://account-server.localhost/index.php?s=/index/index/setMyType', Obj) // 得到类别列表，用于显示
        .then(res => {
          console.log('res:', res)
          if (res.code === 'ok') {
            this.options = res.typeList
          }
        })
    },
    select: function (index) {
      if (this.options[index].my === 1) {
        this.options[index].my = 0
      } else {
        this.options[index].my = 1
      }
    }
  },
  created () {
    this.userinfo = this.$store.state.userinfo
    this.email = this.userinfo.email
    let Obj = {}
    Obj.userid = this.userinfo.id
    Obj.userid = 1
    if (Obj.userid) {
      postData('http://account-server.localhost/index.php?s=/index/index/getTypeList', Obj) // 得到类别列表，用于显示
        .then(res => {
          console.log('res:', res)
          if (res.code === 'ok') {
            this.options = res.typeList
          }
        })
    } else {
      console.log('login-error')
    }
  }
}
</script>
<style lang="stylus">
.content
  width 100%;
  margin 0 auto;
  position fixed;
  top 0
  bottom 0
  z-index 2
  background #fff;
  .top
    height 40px
    width 100%
    line-height 40px;
    text-align left;
    background rgb(249,124,66)
    .back
      margin-left 15px;
      height 40px;
      width 100px;
      color #fff
    .back a
      color #fff
  .title
    width 100%;
    height 50px;
    line-height 50px;
    text-align left
    box-sizing border-box
    padding-left 15px;
  .set
    width 100%
    box-sizing border-box
    padding-left 15px;
    padding-right 15px;
    height auto;
    .set-list
      float left
      padding-left 22px;
      padding-right 22px;
      height 30px;
      line-height 30px;
      margin-right 10px;
      margin-bottom 10px;
      background #eee
      color #666
      border-radius 3px;
    .red
      background rgb(249,124,66)
      color #fff
    // li
    //   margin-bottom 10px
    //   float left
  .buttons
    width 90%;
    margin 0 auto;
    margin-top 35px;
    padding-top 35px;
    position fixed
    bottom 15px;
    left 5%;
</style>
